Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header class="d-flex flex-wrap justify-content-center py-3 mb-4">
	<h1>Logo Rebuild</h1>
</header>
<div class="container mt-5">
	<div id="game-container">
		<div class="game" data-game-index="0">
			<img class="logo-bg" src="https://alexandrevacassin.fr/codepen/puzzle/google-base.svg">
			<div id="puzzle-frame-0" class="puzzle-frame">
				
				<div class="droppable" data-index="0"></div>
				<div class="droppable" data-index="1"></div>
				<div class="droppable" data-index="2"></div>
				<div class="droppable" data-index="3"></div>
			</div>
			<button class="btn btn-primary mt-2 mb-5 randomize-button">Shuffle</button>
			<div class="pieces-container">
				
				<div class="draggable" data-index="0">
					<img src="https://alexandrevacassin.fr/codepen/puzzle/google-1.svg">
				</div>
				<div class="draggable" data-index="1">
					<img src="https://alexandrevacassin.fr/codepen/puzzle/google-2.svg">
				</div>
				<div class="draggable" data-index="2">
					<img src="https://alexandrevacassin.fr/codepen/puzzle/google-3.svg">
				</div>
				<div class="draggable" data-index="3">
					<img src="https://alexandrevacassin.fr/codepen/puzzle/google-4.svg">
				</div>
			</div>
		</div>
		<div class="game" data-game-index="1" style="display: none">

<div id="puzzle-frame-1" class="puzzle-frame">
				
				<div class="droppable" data-index="0"></div>
				<div class="droppable" data-index="1"></div>
				<div class="droppable" data-index="2"></div>
				<div class="droppable" data-index="3"></div>
				<div class="droppable" data-index="4"></div>
			</div>
			<img class="logo-bg" src="https://alexandrevacassin.fr/codepen/puzzle/lg-base.svg">
			<button class="btn btn-primary mt-2 mb-5 randomize-button">Shuffle</button>
			<div class="pieces-container">
				
				<div class="draggable" data-index="0">
					<img src="https://alexandrevacassin.fr/codepen/puzzle/lg-1.svg">
				</div>
				<div class="draggable" data-index="1">
					<img src="https://alexandrevacassin.fr/codepen/puzzle/lg-2.svg">
				</div>
				<div class="draggable" data-index="2">
					<img src="https://alexandrevacassin.fr/codepen/puzzle/lg-3.svg">
				</div>
				<div class="draggable" data-index="3">
					<img src="https://alexandrevacassin.fr/codepen/puzzle/lg-4.svg">
				</div>
				<div class="draggable" data-index="4">
					<img src="https://alexandrevacassin.fr/codepen/puzzle/lg-5.svg">
				</div>
			</div>
		</div>
		<div class="game" data-game-index="2" style="display: none;">
			<img class="logo-bg" src="https://alexandrevacassin.fr/codepen/puzzle/apple-base.svg">
			<div id="puzzle-frame-2" class="puzzle-frame">
				
				<div class="droppable" data-index="0"></div>
				<div class="droppable" data-index="1"></div>
			</div>
			<button class="btn btn-primary mt-2 mb-5 randomize-button">Shuffle</button>
			<div class="pieces-container">
				
				<div class="draggable" data-index="0">
					<img src="https://alexandrevacassin.fr/codepen/puzzle/apple-1.svg">
				</div>
				<div class="draggable" data-index="1">
					<img src="https://alexandrevacassin.fr/codepen/puzzle/apple-2.svg">
				</div>
			</div>
		</div>
		
	</div>
</div>
<h1 class="end"></h1>
<div class="confettiButton" data-emoji="🧩"></div>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

body {
	background: #191919;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 300;
}

h1,
h2,
h3,
h4,
h5 {
	font-weight: 700;
	color: white;
}

.btn {
	border-radius: 50px;
}

#game-container,
.game {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.puzzle-frame {
	display: grid;
	grid-template-columns: repeat(5, 60px);
	grid-template-rows: repeat(5, 60px);
	margin-bottom: 20px;
	height: 340px;
	width: 340px;
}

.logo-bg {
	width: 340px;
	height: 340px;
	position: absolute;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.droppable {
	border: 0px dashed #ccc;
	position: absolute;
}

.game[data-game-index="0"] .droppable[data-index="0"],
.game[data-game-index="0"] .draggable[data-index="0"] {
	width: 254px;
	height: 132px;
}

.game[data-game-index="0"] .droppable[data-index="0"] {
	margin-left: 25px;
	margin-top: 5px;
}

.game[data-game-index="0"] .droppable[data-index="1"],
.game[data-game-index="0"] .draggable[data-index="1"] {
	width: 72px;
	height: 146px;
}

.game[data-game-index="0"] .droppable[data-index="1"] {
	margin-left: 7px;
	margin-top: 95px;
}

.game[data-game-index="0"] .droppable[data-index="2"],
.game[data-game-index="0"] .draggable[data-index="2"] {
	width: 253px;
	height: 132px;
}

.game[data-game-index="0"] .droppable[data-index="2"] {
	margin-left: 25px;
	margin-top: 199px;
}

.game[data-game-index="0"] .droppable[data-index="3"],
.game[data-game-index="0"] .draggable[data-index="3"] {
	width: 156px;
	height: 153px;
}

.game[data-game-index="0"] .droppable[data-index="3"] {
	margin-left: 170px;
	margin-top: 139px;
}

.game[data-game-index="1"] .droppable[data-index="0"],
.game[data-game-index="1"] .draggable[data-index="0"] {
	width: 149px;
	height: 135px;
}

.game[data-game-index="1"] .droppable[data-index="0"] {
	margin-left: 28px;
	margin-top: 28px;
}

.game[data-game-index="1"] .droppable[data-index="1"],
.game[data-game-index="1"] .draggable[data-index="1"] {
	width: 135px;
	height: 148px;
}

.game[data-game-index="1"] .droppable[data-index="1"] {
	margin-left: 28px;
	margin-top: 164px;
}

.game[data-game-index="1"] .droppable[data-index="2"],
.game[data-game-index="1"] .draggable[data-index="2"] {
	width: 149px;
	height: 149px;
}

.game[data-game-index="1"] .droppable[data-index="2"] {
	margin-left: 163px;
	margin-top: 164px;
}

.game[data-game-index="1"] .droppable[data-index="3"],
.game[data-game-index="1"] .draggable[data-index="3"] {
	width: 48px;
	height: 149px;
}

.game[data-game-index="1"] .droppable[data-index="3"] {
	margin-left: 163px;
	margin-top: 96px;
}

.game[data-game-index="1"] .droppable[data-index="4"],
.game[data-game-index="1"] .draggable[data-index="4"] {
	width: 41px;
	height: 41px;
}

.game[data-game-index="1"] .droppable[data-index="4"] {
	margin-left: 95px;
	margin-top: 95px;
}

.game[data-game-index="2"] .droppable[data-index="0"],
.game[data-game-index="2"] .draggable[data-index="0"] {
	width: 43px;
	height: 49px;
}

.game[data-game-index="2"] .droppable[data-index="0"] {
	margin-left: 166px;
	margin-top: 43px;
}

.game[data-game-index="2"] .droppable[data-index="1"],
.game[data-game-index="2"] .draggable[data-index="1"] {
	width: 173px;
	height: 161px;
}

.game[data-game-index="2"] .droppable[data-index="1"] {
	margin-left: 80px;
	margin-top: 94px;
}

.pieces-container {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.draggable {
	cursor: grab;
	transform: rotate(45deg);
	transition: transform 0.5s, filter 0.2s;
	background: transparent;
	filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1))
		drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.3));
}

.ui-draggable-disabled {
	margin: 0px;
	transform: rotate(0deg);
	filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, 0.3));
	cursor: default;
}

.ui-draggable-dragging {
	transform: rotate(0deg);
	filter: drop-shadow(0px 15px 30px rgba(0, 0, 0, 0.25))
		drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.3));
	cursor: grabbing;
}

svg {
	width: 300px;
	height: 300px;
	position: absolute;
	pointer-events: none;
}

.bg {
	width: 300px;
	height: 300px;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: none;
	background: transparent;
}

.confettiButton {
	display: none;
}

.end {
	text-align: center;
}

console.log("Event Fired")
$(document).ready(function () {
	let currentGameIndex = 0;
	const totalGames = $(".game").length;

$(
			`#game-container .game[data-game-index="${gameIndex}"] .droppable`
		).droppable({
			accept: ".draggable",
			drop: function (event, ui) {
				var droppedElement = ui.draggable;
				var droppableIndex = $(this).data("index");
				var draggableIndex = droppedElement.data("index");
				if (droppableIndex === draggableIndex) {
					$(this).addClass("ui-state-highlight").droppable("disable");
					$(`#puzzle-frame-${gameIndex}`).append(droppedElement);
					droppedElement
						.draggable("disable")
						.css({
							top: 0,
							left: 0,
							transform: "rotate(0deg)"
						})
						.position({
							of: $(this),
							my: "left top",
							at: "left top"
						});
					checkWin(gameIndex);
				}
			}
		});
	}

function showConfetti() {
		const jsConfetti = new JSConfetti();
		const emoji = $(".confettiButton").attr("data-emoji");
		jsConfetti.addConfetti({
			emojis: [emoji],
			emojiSize: 70,
			confettiNumber: 40
		});
	}

function showGameComplete() {
		$(".end").html("Congratulations! You've completed all the puzzles!");
	}

function initializeGame(gameIndex) {
		randomize(gameIndex);
		initializeDraggableDroppable(gameIndex);
	}

$(".randomize-button").click(function () {
		const gameIndex = $(this).closest(".game").data("game-index");
		randomize(gameIndex);
	});

initializeGame(currentGameIndex);
});

Frontend Forever App